/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="web-service_form"
             :label-width="100">
        <!-- <div class="form__title">
            <lang>基本信息</lang>
        </div> -->
        <!-- <div class="web-service__top">
            <img src="../../../../img/service/web.png"
                 alt="">
            <div class="name">
                Web Service
            </div>
        </div> -->
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>模型名称</lang>
            </sf-fieldlabel>
            <div v-if="!showModelList"
                 class="model-name">
                {{ formData.name }}
            </div>
            <sf-select
                v-else
                v-model="formData.default.modelId"
                :default-width="defaultWidth"
                :allow-blank="false"
                :options="modelList" />
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>服务名称</lang>
            </sf-fieldlabel>
            <sf-textfield
                ref="fieldName"
                v-model="formData.readableName"
                :default-width="defaultWidth"
                :max-length="40"
                :allow-blank="false"
                :utf8-length="false"
                vtype="name"
                :blur-trim="true"
                :placeholder="_('请输入服务名称')" />
        </sf-form-item>
        <sf-form-item>
            <sf-fieldlabel>
                <lang>描述</lang>
            </sf-fieldlabel>
            <sf-textarea
                v-model="formData.description"
                :default-width="defaultWidth"
                :max-length="300"
                :utf8-length="false"
                :placeholder="_('选填，不超过300字')" />
        </sf-form-item>
        <select-image-form
            v-if="showImageList"
            ref="defaultImage"
            :submit-data="formData.default"
            :width="defaultWidth"
            :image-list="imageList" />
        <sf-form-item class="flex-center">
            <sf-fieldlabel>
                <lang>服务协议</lang>
            </sf-fieldlabel>
            <sf-radio-group v-model="formData.protocol">
                <sf-radio name="protocol"
                          :check-value="1">
                    https
                </sf-radio>
            </sf-radio-group>
        </sf-form-item>
        <instance-number-form
            ref="defaultInstance"
            :width="227"
            :submit-data="formData.default" />
        <resource-config-form
            ref="defaultResource"
            :default-width="defaultWidth"
            :label-name="_('单实例资源分配')"
            :submit-data="formData.default" />
    </sf-form>
</template>
<script>
const DEFAULT_WIDTH = 486;
const DEFAULT_VALUE = {
    readableName: '',
    description: '',
    name: '',
    protocol: 1,
    default: {
        cpuNum: 1,
        gpuNum: 0,
        memorySize: 1,
        minReplicas: 1,
        maxReplicas: 1,
        image: '',
        modelId: '',
        modelUri: '',
        modelName: '',
        predictor: ''
    }
};

import selectImageForm from 'src/home/mod_cluster/common/common_form/select_image_form.vue';
import instanceNumberForm from 'src/home/mod_cluster/common/common_form/instance_number_form.vue';
import resourceConfigForm from 'src/home/mod_cluster/common/common_form/resource_config_form.vue';

export default {
    components: {
        selectImageForm,
        instanceNumberForm,
        resourceConfigForm
    },

    data () {
        return {
            formData: { ...DEFAULT_VALUE },
            imageList: [],
            modelList: [],
            showModelList: false,
            showImageList: false
        }
    },

    computed: {
        modelId () {
            return this.formData.default.modelId;
        },

        defaultWidth () {
            return DEFAULT_WIDTH;
        }
    },

    watch: {
        modelId: {
            deep: true,
            handler () {
                if (this.modelId) {
                    this.formData.default.predictor = this.modelList.find(
                        item => item.modelId === this.modelId
                    ).predictor;
                    this.showImageList = this.formData.default.predictor === 'custom';
                }
            }
        }
    },

    methods: {
        getJsonValue () {
            if (this.showImageList) {
                this.formData.default.image =
                    this.$refs.defaultImage &&
                    this.$refs.defaultImage.getJsonValue().image;
            }
            return this.formData;
        },

        setJsonValue (data) {
            Object.assign(this.formData, data);
        }
    }


}
</script>
<style lang="less">
.web-service_form {
    padding: 0 32px;
    height: 550px;
    .web-service__top {
        background: url(../../../img/service/web_hover.png);
        background-size: 100% 100%;
        height: 56px;
        display: flex;
        align-items: center;
        width: 590px;
        margin: 15px 0;
        img {
            width: 40px;
            height: 40px;
            margin: 0 8px 0 16px;
        }
        .name {
            font-size: 14px;
            color: #14161a;
        }
    }
    .sfv-form-item {
        margin-bottom: 10px;
    }
    .flex-center {
        display: flex;
        align-items: center;
        .model-name {
            margin-left: 4px;
            font-weight: bold;
            color: #14161a;
        }
    }
    .sfv-fieldlabel-left {
        padding-left: 0;
    }
    .deploy_service__top {
        border-bottom: 1px solid #dee3ed;
        padding-bottom: 18px;
        display: flex;
        align-items: center;
        color: #5c5c5c;
        margin-bottom: 15px;
        .top__img {
            width: 40px;
            height: 40px;
            margin-right: 8px;
        }
        .top__title {
            font-size: 14px;
            font-weight: bold;
            color: #14161a;
            margin-bottom: 7px;
        }
    }
}
.form-flex {
    display: flex;
}
</style>
